<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>QuizMe</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/updatequestion.js"></script>
    <script src="../js/simpleajax.js"></script>

    <link href="../include/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/close.css" rel="stylesheet">


</head>

<body>

    <body class="is-preload">
        <div id="page-wrapper">
            <!-- Header  导航栏 -->
            <header id="header">
                <nav id="nav" class="navbar navbar-expand-lg navbar-light bg-light">
                    <a class="navbar-brand" href="#">QuizMe</a>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="../index.html">Home</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" href="../html/choose.html" style="text-decoration: none">Quiz
                                    Now</a>
                            </li>

                            <li id="login" class="nav-item">
                                <a class="nav-link" href="../html/login.html" style="text-decoration: none">Login
                                    Now</a>
                            </li>
                            <li id="login-out" class="nav-item">
                                <a class="nav-link" href="../html/logout.html" style="text-decoration: none">Login out
                                    Now</a>
                            </li>
                            <li id="profile" class="nav-item">
                                <a class="nav-link" href="../html/personal.html" style="text-decoration: none">Personal
                                    information</a>
                            </li>
                        </ul>
                    </div>

                </nav>
            </header>
            <h2 class="alert alert-secondary" style="text-align: center;">Update Question</h2>
            <div id="record" >
                    
                <div id="bottom">
                    
                    <table id="table" class="table table-hover">
                        
                        <hr>
                        <thead class="thead-light">
                            <tr>
                                <th scope="col">Category</th>
                                <th scope="col">Level</th>
                                <th scope="col">PublicOrNot</th>
                                <th scope="col">Question</th>
                                <th scope="col">Answer</th>
                            </tr>
                        </thead>
                        <tbody id="tBody"></tbody>
                    </table>
                </div>
            </div>
            <hr>
            <div id="update">
                <form name="question_form">
                    <div class="form-group">
                        <label>Category</label>
                        <div class="form-row">
                            <label for="editable-select">Old or New Category?</label>
                            <div class="col">
                                <select id="editable-select" class="form-control">
                                    <option value="old">old</option>
                                    <option value="new">new</option>
                                </select>
                            </div>
                            <div class="col">
                                <select id="old_category" class="form-control">
                                
                                </select>
                                <input type="text" id="new_category" class="form-control">
                            </div>
                            
                            
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="difficulty_level">Difficulty</label>
                        <select name="level" id="difficulty_level" class="form-control">
                            <option value=1 selected>easy</option>
                            <option value=2>medium</option>
                            <option value=3>hard</option>
                          </select>
                    </div>
                    <div class="form-group">
                        <label>Property</label>
                        <select name="creator" id="creator" class="form-control">
                            <option value=0 selected>Public</option>
                            <option value=1>Private</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Question</label>
                        <textarea cols=80 rows=5 name="question" id="qst" class="form-control"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Answer</label>
                        <input type="text" name="answer" id="ans" class="form-control">
                    </div>
                    
                    <button class="btn btn-primary" type="button" onclick="update()" onclick = "return false">UpdateQuestion</button>
                    <input type="reset" value="Reset" class="btn btn-secondary">
                </form>                     
            </div>
        </div>    
    </body>
    <div id="footer">
        Tianjin University TIEI &copy; 2023
    </div>
</body>

</html>


